<script setup>
	import { onMounted, ref } from 'vue'
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { http } from '@/utils/http.js'
	import { useUsercodeStore } from '@/store/usercode.js'

	const userCodeStore = useUsercodeStore()

	const agree = ref(true)
	// 用户信息卡尘(暂时)
	const balance = ref(0)
	const transaction_balance = ref(0)
	async function getUserMoney() {
		const res = await http.request({
			url: '/api/user/userMsg',
			method: 'POST',
			data: {},
		})
		console.log('user')
		console.log(res)
		balance.value = res.data.data.balance
		transaction_balance.value = res.data.data.transaction_balance
	}

	// 获取充值金额
	const levelList = ref([])
	async function getLevel() {
		const res = await http.request({
			url: '/api/recharge/getMoney',
			method: 'POST',
			data: {},
		})
		console.log('level')
		console.log(res)
		levelList.value = res.data
		level.value = res.data[0].money
	}

	//选择充值金额
	const level = ref(0)
	function chooseLevel(lev) {
		level.value = lev
	}

	//选择支付方式
	const payType = ref(1)
	function changePay(evt) {
		payType.value = evt.detail.value
	}

	//创建订单
	const orderId = ref()
	async function createOrders() {
		const res = await http.request({
			url: '/api/recharge/createRecharge',
			method: 'POST',
			data: {
				pay_type: payType.value,
				money: level.value,
				sorce: 1,
			},
		})
		console.log(res)
		orderId.value = res.data
		wxPay(res.data)
	}

	const paying = ref(1)
	async function wxPay(id) {
		const res = await http.request({
			url: '/api/adapay/adapay/adaPayOrder',
			method: 'POST',
			data: {
				id: id,
				type: 1,
			},
		})
		console.log(res)
		if (res.st == 1) {
			uni.navigateToMiniProgram({
				appId: res.data.expend.wx_app_id,
				path: res.data.expend.path,
				extraData: {},
				success(res) {
					// 打开成功
					paying.value = 2
				},
			})
		} else {
			uni.utils.toast('拉起支付失败，请联系客服~')
		}
	}

	//轮询微信支付订单状态
	const timeStatu = ref(true)
	async function askWxPay() {
		setTimeout(() => {
			timeStatu.value = false
		}, 5000)
		const res = await http.request({
			url: 'api/recharge/getRechargePayInfo',
			method: 'POST',
			data: {
				id: orderId.value,
			},
		})
		if (res.st == 1) {
			uni.utils.toast('充值成功')
			userCodeStore.setIsTrans(1)
			getUserMoney()
		} else {
			if (timeStatu.value) {
				askWxPay()
			} else {
				uni.utils.toast(res.msg)
			}
		}
		paying.value = 1
	}

	//官方微信支付
	// async function wxPay(id) {
	// 	const res = await http.request({
	// 		url: '/api/recharge/rechargeWechatPay',
	// 		method: 'POST',
	// 		data: {
	// 			id: id,
	// 		},
	// 	})
	// 	console.log(res)
	// 	if (res.st == 1) {
	// 		uni.requestPayment({
	// 			provider: 'wxpay',
	// 			timeStamp: res.data.timeStamp, // 时间戳（单位：秒）
	// 			nonceStr: res.data.nonceStr, // 随机字符串
	// 			package: res.data.package, // 固定值
	// 			signType: res.data.signType,
	// 			paySign: res.data.paySign, // 签名，这里用的 MD5 签名
	// 			success: function (res) {
	// 				console.log('success:' + JSON.stringify(res))
	// 				if (res.errMsg == 'requestPayment:ok') {
	// 					uni.utils.toast('充值成功')
	// 					userCodeStore.setIsTrans(1)
	// 					setTimeout(() => {
	// 						uni.switchTab({
	// 							url: '/pages/mine/index',
	// 						})
	// 					}, 2000)
	// 				}
	// 			},
	// 			fail: function (err) {
	// 				uni.utils.toast('充值失败')
	// 				// console.log('fail:' + JSON.stringify(err))
	// 			},
	// 		})
	// 	} else {
	// 		uni.utils.toast(res.msg)
	// 	}
	// }

	//购买
	function buyStars() {
		if (!agree.value) {
			uni.utils.toast('请同意购买协议')
			return
		}
		createOrders()
	}

	//查看卡尘明细
	function goCheckStore() {
		uni.navigateTo({
			url: `/minePage/storedetail/index`,
		})
	}
	//协议
	function goRule(id) {
		uni.navigateTo({
			url: `/homePage/agreement/index?id=${id}`,
		})
	}
	onLoad(() => {
		getUserMoney()
		getLevel()
	})
	onShow(() => {
		if (paying.value == 2) {
			askWxPay()
		}
	})
</script>

<template>
	<view>
		<!-- 头部 -->
		<view class="top-item">
			<view class="balance">
				<view class="money">{{ balance }}</view>
				<!-- <image
					style="flex-shrink: 0"
					src="https://ojqn.wm2177.com/wechat_imgs/mine/wallet-icon.png"
					class="wallet-icon"
				></image> -->
			</view>
			<view style="font-size: 32rpx; text-align: center"
				>可结算货款({{ transaction_balance }})</view
			>
			<view class="details" @click="goCheckStore">卡尘明细</view>
		</view>

		<view class="balance-tit">选择购买档位</view>

		<!-- 选择档位 -->
		<view class="choose-money">
			<view
				class="money-list"
				v-for="(item, index) in levelList"
				:key="item.id"
				:class="{ 'choose-now': level == item.money }"
				@click="chooseLevel(item.money)"
			>
				<view class="detil-list">
					<view class="detil-num">{{ item.money }}卡尘</view>
				<!-- 	<image
						src="https://ojqn.wm2177.com/wechat_imgs/mine/wallet-icon.png"
						class="money-icon"
					></image> -->
				</view>
				<view class="real-money">{{ item.money }}元</view>
			</view>
		</view>

		<view class="balance-tit">支付方式</view>
		<!-- //支付方式选择 -->
		<view class="wechat" style="">
			<view class="pay-list">
				<radio-group>
					<view class="group-item" @change="changePay">
						<view>
							<radio
								style="transform: scale(0.8)"
								value="1"
								:checked="payType == 1"
							/>
						</view>
						<view
							style="
								width: 100%;
								display: flex;
								align-items: center;
								justify-content: space-between;
							"
						>
							<view style="display: flex; align-items: center">
								<image
									style="
										width: 52rpx;
										height: 52rpx;
										margin-right: 18rpx;
									"
									src="../../static/weixinpay.png"
									mode=""
								></image>
								<text style="font-size: 24rpx">微信支付</text>
							</view>
						</view>
					</view>
					<!-- <view class="group-item">
						<view>
							<radio
								style="transform: scale(0.8)"
								value="2"
								:checked="payType == 2"
							/>
						</view>
						<view
							style="
								width: 100%;
								display: flex;
								align-items: center;
								justify-content: space-between;
							"
						>
							<view style="display: flex; align-items: center">
								<image
									style="
										width: 52rpx;
										height: 52rpx;
										margin-right: 18rpx;
									"
									src="../../static/zhifubbao.png"
									mode=""
								></image>
								<text style="font-size: 24rpx">支付宝</text>
							</view>
						</view>
					</view> -->
				</radio-group>
			</view>
		</view>
		<!-- 购买按钮 -->
		<view class="item-button" @click="buyStars">立即购买</view>

		<view class="about">
			<checkbox
				@click="agree = !agree"
				value="cb"
				:checked="agree"
				color="#FFF"
				style="transform: scale(0.8)"
			/>
			<view class="contactChoice1">我已阅读并同意</view>
			<view
				class="contactChoice1"
				style="color: #7863ff"
				@tap.stop="goRule(5)"
				>《用户购买协议》</view
			>
		</view>

		<view class="balance-tit">购买说明 </view>
		<view class="shows">
			<view class="shows-text"
				>1、卡尘用在平台消费，且购买后不支持退款</view
			>
			<view class="shows-text">2、若遇到购买未到账，请联系客服</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	page {
		background-color: #ffffff;
		font-family: OPPOSans;
	}
	.top-item {
		align-items: center;
		width: 100vw;
		height: 240rpx;
		background: linear-gradient(0deg, #ffffff, #e0dbff, #dad5fc);
	}
	.balance {
		display: flex;
		flex-direction: row;
		font-size: 58rpx;
		font-family: OPPOSans;
		font-weight: 500;
		align-items: center;
		// width: 500rpx;
		margin: auto;
		// margin-left: 200rpx;
		padding-top: 40rpx;
	}
	.money {
		text-align: center;
		margin-left: 30rpx;
		margin: auto;
		align-items: center;
	}
	.wallet-icon {
		width: 50rpx;
		height: 44rpx;
		margin: auto;
		padding-right: 120rpx;
	}
	.details {
		text-align: center;
		margin-top: 8rpx;
		color: #7863ff;
		text-decoration: underline;
		font-size: 28rpx;
		font-family: OPPOSans;
		font-weight: 500;
	}
	.balance-tit {
		margin: 30rpx 30rpx auto;
		font-size: 30rpx;
		font-family: OPPOSans;
		font-weight: 500;
	}

	.group-item {
		display: flex;
		align-items: center;
		padding: 22rpx 20rpx;
		// radio选中时背景颜色设置
		::v-deep radio .wx-radio-input.wx-radio-input-checked {
			background-color: $all-color !important;
			border: 1px solid $all-color !important;
		}
	}
	.choose-money {
		justify-content: space-between;
		flex-wrap: wrap;
		display: flex;
		width: 95vw;
	}
	.money-list {
		width: 200rpx;
		height: 140rpx;
		border-radius: 14rpx;
		border: 2rpx solid #dcdada;
		box-sizing: border-box;
		align-items: center;
		margin-top: 30rpx;
		margin-left: 30rpx;
		text-align: center;
	}
	.detil-num {
		padding-left: 8rpx;
		width: 150rpx;
	}
	.detil-list {
		align-items: center;
		text-align: center;
		font-size: 26rpx;
		font-weight: 500;
		display: flex;
		flex-direction: row;
		margin: 30rpx 5rpx 20rpx 0rpx;
	}
	.real-money {
		font-size: 24rpx;
		font-weight: 400;
		color: #9b9b9d;
	}
	.money-icon {
		width: 28rpx;
		height: 22rpx;
	}
	.choose-now {
		background-color: #f3f1ff;
		border: 4rpx solid #7863ff;
	}
	.item-button {
		width: 90%;
		height: 90rpx;
		background-color: #7863ff;
		margin: auto;
		margin-top: 38rpx;
		left: 50%;
		color: #fff;
		font-size: 30rpx;
		font-weight: bold;
		justify-content: center;
		align-items: center;
		text-align: center;
		border-radius: 50rpx;
		line-height: 90rpx;
		font-family: OPPOSans;
		font-weight: 500;
	}

	.contactChoice1 {
		font-size: 22rpx;
		color: #9b9b9d;
		font-weight: 400;
	}
	.about {
		margin-top: 20rpx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;

		// radio选中时背景颜色设置
		::v-deep radio .wx-radio-input.wx-radio-input-checked {
			background-color: $all-color !important;
			border: 1px solid $all-color !important;
		}

		::v-deep checkbox .wx-checkbox-input.wx-checkbox-input-checked {
			color: #fff;
			background: $all-color;
		}

		::v-deep .wx-checkbox-input.wx-checkbox-input-checked {
			border: 1px solid $all-color;
		}
	}
	.shows {
		font-size: 24rpx;
		color: #9b9b9d;
		font-weight: 400;
		margin: 30rpx 30rpx auto;
	}
	.shows-text {
		margin-top: 10rpx;
	}
</style>
